﻿//初始化加载
$(function () {
    getdta();
    var time = window.setInterval(function () {
        //getdta();
        window.location.reload();
    }, 600000);

    //window.setTimeout(function () {
    //    window.location.reload();
    //}, 2000);
});
//获取 数据
var getdta = function () {
    $.ajax({
        type: "POST",
        url: "/Report/EquipmentData",
        //data: {id: "11",test: $('#tbx1').val()},
        dataType: "json",
        success: function (data) {
            //设备title
            title(data.groupdata);
            //设备列表
            carousel(data.list);
            //设备状态
            var eqmtstatusChart = echarts.init($('#eqmtstatus')[0]);
            var eqmtstatusoption = {
                legend: {
                    orient: 'vertical', 
                    left: 'left',
                    textStyle: {
                        color: 'white',
                        fontWeight: 'bold'
                    }
                },
                color: ['#623683', '#D58512', '#269ABC', '#AC2925', '#449D44'],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '80%',
                        label: {
                            textStyle: {
                                color: 'white'
                            }
                        },
                        data: data.groupdata,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            eqmtstatusChart.setOption(eqmtstatusoption);

            //设备效率OEE
            var chartDom = document.getElementById('pointer');
            var pointerChart = echarts.init(chartDom);
            var pointeroption = {
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [
                                    [0.3, '#FD666D'],
                                    [0.7, '#67E0E3'],
                                    [1, '#37A2DA']
                                ]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -10,
                            length: 8,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: -10,
                            length: 15,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        axisLabel: {
                            color: 'inherit',
                            distance: 15,
                            fontSize: 12
                        },
                        detail: {
                            fontSize: 25,
                            valueAnimation: true,
                            formatter: '{value}%',
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: data.efficiency
                            }
                        ]
                    }
                ]
            };
            //setInterval(function () {
            //    pointerChart.setOption({
            //        series: [
            //            {
            //                data: [
            //                    {
            //                        value: +(Math.random() * 100).toFixed(2)
            //                    }
            //                ]
            //            }
            //        ]
            //    });
            //}, 2000);
            pointerChart.setOption(pointeroption);
            //设备异常轮播
            var MyMarhq = '';
            clearInterval(MyMarhq);
            $('.table-body>tr').remove();
            $('.tbl-body tbody').empty();
            $('.tbl-header tbody').empty();
            var str = '';
            var Items = data.exception;
            $.each(Items, function (i, item) {
                var sty = i % 2 > 0 ? 'class="tablebtr-two"' : 'class="tablebtr-one"';
                str = '<tr ' + sty + '>' +
                    '<td>' + (i+1) + '</td>' +
                    '<td>' + item.sn + '</td>' +
                    '<td>' + item.name + '</td>' +
                    '<td>' + item.status_name + '</td>' +
                    '</tr>';
                $('.tbl-body tbody').append(str);
                $('.tbl-header tbody').append(str);
            });

            if (Items.length > 10) {
                $('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
                $('.tbl-body').css('top', '0');
                var tblTop = 0;
                var speedhq = 50; // 数值越大越慢
                var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
                function Marqueehq() {
                    if (tblTop <= -outerHeight * Items.length) {
                        tblTop = 0;
                    } else {
                        tblTop -= 1;
                    }
                    $('.tbl-body').css('top', tblTop + 'px');
                }
                MyMarhq = setInterval(Marqueehq, speedhq);
                // 鼠标移上去取消事件
                $(".tbl-header tbody").hover(function () {
                    clearInterval(MyMarhq);
                }, function () {
                    clearInterval(MyMarhq);
                    MyMarhq = setInterval(Marqueehq, speedhq);
                })

            }
        }
    });
}

//设备 title
var title = function (groupdata) {
    $('.quer>spn').remove();
    var items = "";
    var value = 0;
    for (var i = 0; i < groupdata.length; i++) {
        value = value + groupdata[i].value;
        items = (items != "" ? items : "") + '<spn class="' + statustype(groupdata[i].name) + '">' + groupdata[i].name + '：' + groupdata[i].value + '</spn>';
    }
    items = '<spn style="background-color: #5470c6;">设备数量：' + value + '</spn>' + (items != "" ? items : "");
    $('.quer').append(items);
};

var statustype = function (statusid) {
    switch (statusid) {
        case "故障停机":
        case 1:
            return "breakdown"
            break;
        case "闲置停用":
        case 2:
            return "inidle"
            break;
        case "调试":
        case 3:
            return "debug"
            break;
        case "待生产":
        case 4:
            return "await"
            break;
        case "正常运行":
        case 5:
            return "normal"
            break;
    }
};

//渲染设备列表
var carousel = function (list) {
    $('.swiper-wrapper>div').remove();
    $('.swiper-pagination>spn').remove();
    var html, items;
    var length = list.length;
    var pagesize = Math.ceil(length / 45)
    for (var i = 1; i <= pagesize; i++) {
        var top = (i - 1) * 45;
        var pagesrow = (i * 45) < length ? (i * 45) : length;
        for (var r = top; r < pagesrow; r++) {
            var style = "";
            if (list[r].status_id == 1) { style = 'style="background-color:#AC2925;"'; };
            if (list[r].status_id == 2) { style = 'style="background-color:#623683;"'; };
            if (list[r].status_id == 3) { style = 'style="background-color:#D58512;"'; };
            if (list[r].status_id == 4) { style = 'style="background-color:#269ABC;"'; };
            if (list[r].status_id == 5) { style = 'style="background-color:#398439;"'; };
            items = (r >= 1 ? items : '') + '<div class="divfolt" style="width:10.2%; height:17.5%;"><div class="label">' + (r + 1) + '</div><div class="mesg" ' + style+'><p><spn>SN：</spn><label>' + list[r].sn + '</label></p><p><spn>名称：</spn><label>' + list[r].name + '</label></p><p><spn>状态：</spn><label class="status  ' + statustype(list[r].status_id) + '">' + list[r].status_name + '</label></p></div></div>';
        }
        html = '<div class="swiper-slide">' + items + '</div>';
        $('.swiper-wrapper').append(html);
        items = "";
        html = "";
    };
    var swiper = new Swiper(".mySwiper", {
        //滚动方向 horizontal/vertical
        direction: 'horizontal',
        // 自动播放
        autoplay: true,
        // 循环播放
        loop: true,
        autoplay: {
            delay: 5000
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + "</span>";
            },
        },
    });
    //鼠标覆盖停止自动切换
    swiper.el.onmouseover = function () {
        swiper.autoplay.stop();
    };
    //鼠标离开开始自动切换
    swiper.el.onmouseout = function () {
        swiper.autoplay.start();
    };
}

//当前时间
function showLocale(objD) {
    var str, colorhead, colorfoot;
    var yy = objD.getYear();
    if (yy < 1900) yy = yy + 1900;
    var MM = objD.getMonth() + 1;
    if (MM < 10) MM = '0' + MM;
    var dd = objD.getDate();
    if (dd < 10) dd = '0' + dd;
    var hh = objD.getHours();
    if (hh < 10) hh = '0' + hh;
    var mm = objD.getMinutes();
    if (mm < 10) mm = '0' + mm;
    var ss = objD.getSeconds();
    if (ss < 10) ss = '0' + ss;
    var ww = objD.getDay();
    if (ww == 0) colorhead = "<font color=\"#ffffff\">";
    if (ww > 0 && ww < 6) colorhead = "<font color=\"#ffffff\">";
    if (ww == 6) colorhead = "<font color=\"#ffffff\">";
    if (ww == 0) ww = "星期日";
    if (ww == 1) ww = "星期一";
    if (ww == 2) ww = "星期二";
    if (ww == 3) ww = "星期三";
    if (ww == 4) ww = "星期四";
    if (ww == 5) ww = "星期五";
    if (ww == 6) ww = "星期六";
    colorfoot = "</font>"
    str = "当前时间："+colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + "  " + ww + colorfoot;
    return (str);
}

function tick() {
    var today;
    today = new Date();
    document.getElementById("localtime").innerHTML = showLocale(today);
    window.setTimeout("tick()", 1000);
}
tick();